<template>
	<!-- 核心业务 -->
	<el-card class="card mb-5">
		<template #header>
			<div class="ml-5 flex items-center">
				<HyTitle :title="'核心业务'" />
			</div>
		</template>
		<HyArrayForm
			class="mb-5"
			:hyArrayFormDefault="coreDefault"
			:hyArrayFormConfig="config11"
			:title="'核心业务'"
			ref="coreRef"
			:hyArrayFormFields="coreFields"
		/>
	</el-card>
	<div class="mb-5">
		<Top ref="topRef" :operateType="props.operateType" :sceneOneLevelData="sceneOneLevelData" />
	</div>
	<el-card class="card">
		<template #header>
			<div class="ml-5 flex items-center">
				<HyTitle :title="'贯通层级和功能'" />
			</div>
		</template>
		<div class="ml-10">
			<HyArrayForm
				class="ml-5"
				:hyArrayFormConfig="config22"
				:title="'管理端（贯通层级和功能）'"
				ref="funcRef"
				:hyArrayFormFields="funcManageFields"
				:hyArrayFormDefault="funcManageDefault"
			/>
			<div class="ml-10 mt-5">
				<HyTitle :title="'服务端（业务申请方综述）'" />
				<HyForm
					:showErrorMessage="false"
					:hyFormDefault="funcServerDefault"
					:hyFormConfig="config22"
					:hyFormFields="funcServerFields"
					ref="funcServerRef"
				/>
			</div>
		</div>
	</el-card>
</template>
<script setup lang="ts">
import HyArrayForm from '/@/components/HyArrayForm/index.vue';
import HyForm from '/@/components/HyForm/index.vue';
import HyTitle from '/@/components/HyTitle/index.vue';
import Top from './components/Top/index.vue';
import { useDict } from '/@/hooks/dict';
import { defaultValue, setKeyValue } from '../../utils/default';
import { ElMessage } from 'element-plus';
const { coreDefault, funcServerDefault, funcManageDefault } = defaultValue();
const { manage_client } = useDict('manage_client', 'data_sources', 'involve_level');
const formType: any = inject('formType', 'submit');
//动态表单配置
const config11 = computed(() => {
	return {
		labelWidth: '120px',
		type: formType.value,
	};
});
const coreFields = computed(() => {
	return {
		senceListCoreId: {
			type: 'input',
			hidden: true,
		},
		coreBusiness: {
			label: '核心业务',
			type: 'textarea',
			required: true,
			placeholder: '请用一句话描述拟使用该应用开展的主要业务，2000字以内',
		},
		lastFlowDescription: {
			label: '原流程图描述',
			type: 'textarea',
			required: true,
		},
		nowFlowDescription: {
			label: '现流程图描述',
			type: 'textarea',
			required: true,
		},
		simpFlowDescription: {
			label: '精简流程、压缩环节情况描述',
			type: 'textarea',
			required: true,
		},
		flowImageFileIdList: {
			label: '流程对比图上传',
			type: 'upload',
			required: true,
			fileSize: 200,
			span: 22,
			fileType: ['.jpg', '.jpeg', '.png'],
		},
	};
});
const config22 = computed(() => {
	return {
		labelWidth: '120px',
		type: formType.value,
	};
});
const funcServerFields = computed(() => {
	return {
		sceneLevelFunctionId: {
			type: 'input',
			hidden: true,
		},
		serviceObject: {
			type: 'textarea',
			label: '服务对象',
			required: true,
			placeholder: '请简要概述本应用所有服务对象',
		},
	};
});
const funcManageFields = computed(() => {
	return {
		manageClient: {
			label: '层级',
			type: 'select',
			options: manage_client.value,
			required: true,
		},
		function: {
			label: '功能',
			type: 'textarea',
			required: true,
			placeholder: '请简要概述该层级有关单位在本应用所有场景下所能发挥的作用和功能',
		},
	};
});
const coreRef = ref();
const topRef = ref();
const funcRef = ref();
const funcServerRef = ref();
const props: any = defineProps({
	sceneCoreListData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	sceneOneLevelData: {
		type: Array,
		default: () => {
			return [];
		},
	},
	sceneLevelFunctionData: {
		type: Object,
		default: () => {
			return {};
		},
	},
	operateType: {
		type: String,
		default: '',
	},
});

// 封装添加数据的逻辑
const addCoreData = (items: any[]) => {
	if (Array.isArray(items) && items.length > 0) {
		coreRef.value.cancel();
		items.forEach((item) => {
			coreRef.value.add(item);
		});
	}
	//如果没有数据，需要执行add方法，显示输入框
	else {
		if (formType.value === 'submit') {
			coreRef.value.add();
		}
	}
};

const addFuncData = (object: any) => {
	if (Object.keys(object).length > 0) {
		funcServerRef.value.hyForm = setKeyValue(funcServerDefault, object);
		if (Array.isArray(object.sceneLevelFunctionManageList) && object.sceneLevelFunctionManageList.length > 0) {
			funcRef.value.cancel();
			object.sceneLevelFunctionManageList.forEach((item: any) => {
				funcRef.value.add(item);
			});
		}
	}
	//如果没有数据，需要执行add方法，显示输入框
	else {
		if (formType.value === 'submit') {
			funcRef.value.add();
		}
	}
};

watch(
	() => props,
	(nv1: any) => {
		const { sceneCoreListData = [], sceneLevelFunctionData = {} } = nv1;
		nextTick(() => {
			addCoreData(sceneCoreListData);
			addFuncData(sceneLevelFunctionData);
		});
	},
	{ deep: true, immediate: true }
);

//获取数据
const getData = () => {
	//核心数据
	const sceneCoreList = coreRef.value.submit();
	//贯通层数据
	const sceneLevelFunction = {
		...funcServerRef.value.hyForm,
		sceneLevelFunctionManageList: funcRef.value.submit(),
	};
	//场景数据
	let sceneOneLevelList: any = [];
	const firstList = topRef.value.form.sceneOneLevelList;
	if (firstList && firstList.length > 0) {
		sceneOneLevelList = firstList.map((item: any) => {
			if (item.sceneTwoLevelList && item.sceneTwoLevelList.length > 0) {
				item.sceneTwoLevelList = item.sceneTwoLevelList.map((s_item: any) => {
					return {
						...s_item,
						dataSources: s_item?.dataSources && s_item?.dataSources.length > 0 ? s_item.dataSources.toString() : '',
					};
				});
			}
			return item;
		});
	}
	return {
		sceneCoreList,
		sceneLevelFunction,
		sceneOneLevelList,
	};
};
const check = async () => {
	const result = await coreRef.value.check();
	const result1 = await funcRef.value.check();
	const result2 = await funcServerRef.value.check();
	const result3 = await topRef.value.check();
	if (result && result1 && result2 && result3) {
		return true;
	} else {
		ElMessage.error('表单中有必填项未填写，请检查并补全');
		return false;
	}
};
defineExpose({ getData, check });
</script>
<style scoped lang="scss"></style>
